<template>
    <div class="home">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="员工编号" prop="empno" />
        <el-table-column label="员工姓名" prop="ename" />
        <el-table-column label="职位" prop="job" />
        <el-table-column label="入职日期" prop="hiredate" />
        <el-table-column label="薪资" prop="sal" />
  
  
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" @keyup.enter="init" size="small" placeholder="Type to search" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              修改
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="insertDialogVisible = true">+新增</el-button>
  
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 10]" :size="size"
          :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-- 分页 -->
  
      <!-- 修改对话框 -->
      <el-dialog v-model="editDialogVisible" title="修改" width="500" align-center>
        <!-- 修改表单 -->
        <el-form-item label="员工编号" prop="pass">
          <el-input v-model="editEmp.empno" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工姓名" prop="pass">
          <el-input v-model="editEmp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位" prop="pass">
          <el-input v-model="editEmp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" prop="pass">
          <el-input v-model="editEmp.hiredate" autocomplete="off" />
        </el-form-item>
        <el-form-item label="薪资" prop="pass">
          <el-input v-model="editEmp.sal" autocomplete="off" />
        </el-form-item>
        <!-- 修改表单 -->
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editEmpById">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 修改对话框 -->
  
  <!-- 新增对话框 -->
  <el-dialog v-model="insertDialogVisible" title="新增" width="500" align-center>
        <!-- 新增表单 --> 
        <el-form-item label="员工姓名" prop="pass">
          <el-input v-model="insertEmps.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位" prop="pass">
          <el-input v-model="insertEmps.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" prop="pass">
          <el-input v-model="insertEmps.hiredate" autocomplete="off" />
        </el-form-item>
        <el-form-item label="薪资" prop="pass">
          <el-input v-model="insertEmps.sal" autocomplete="off" />
        </el-form-item>
        <!-- 修改表单 -->
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="insertDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="insertEmp">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 新增对话框 -->
  
  
  
      <!-- 删除对话框 -->
      <el-dialog v-model="deleteVisible" title="删除" width="500" :before-close="handleClose">
        <span>是否删除?</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="deleteVisible = false">取消</el-button>
            <el-button type="primary" @click="deleteEmp">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 删除对话框 -->
    </div>
  </template>
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from 'axios';
  // 记录搜索框中输入的内容
  const search = ref('')
  
  let tableData = ref([]) // 用来存储表格数据（后台返回）
  // 记录数据总条数
  let total = ref(0)
  // 分页当前页码
  let currentPage = ref(1)  // 默认显示第一页
  // 每页数据条数
  let pageSize = ref(5)
  // 控制修改的对话框显示和隐藏
  let editDialogVisible = ref(false) // 默认上来时隐藏
  // 控制新增的对话框显示和隐藏
  let insertDialogVisible = ref(false) // 默认上来时隐藏
  // 修改数据
  let editEmp = ref({})
  // 控制删除的对话框显示和隐藏
  let deleteVisible = ref(false)
  
  // 记录新增数据
  let insertEmps = ref({})
  // 新增
  function insertEmp(){
    axios.post('http://localhost:8089/elementAdmin/insertEmp', insertEmps.value).then((res) => {
      console.log(res)
      if (res.data == 1) {
        insertDialogVisible.value = false // 关闭新增对话框
        ElMessage({
          message: '新增成功.',
          type: 'success',
        })
        init()
      } else {
        ElMessage.error('新增失败.')
        init()
      }
    })
  }
  // 修改一条数据
  function editEmpById() {
    axios.post('http://localhost:8089/elementAdmin/editEmp', editEmp.value).then((res) => {
      console.log(res)
      if (res.data == 1) {
        editDialogVisible.value = false // 关闭修改对话框
        ElMessage({
          message: '修改成功.',
          type: 'success',
        })
        init()
      } else {
        ElMessage.error('修改失败.')
        init()
      }
    })
  }
  
  // 获取初始数据
  function init() {
    let pageData = {
      search: search.value,
      currentPage: currentPage.value,
      pageSize: pageSize.value
    }
    
    axios.post('http://localhost:8089/elementAdmin/getEmpList',pageData)
      .then((res) => {
        console.log(res)
        tableData.value = res.data.empList
        total.value = res.data.total
      })
  }
  
  onMounted(() => {
    init()
  })
  // 点击修改执行的函数
  const handleEdit = (index, row) => {
    // 显示修改对话框
    editDialogVisible.value = true
    console.log(index, row)
    editEmp.value = row  // 点击修改按钮，将当前行的数据给editEmp对象
  }
  // 记录删除的员工编号
  let empno = ref(0)
  
  // 点击删除按钮
  const handleDelete = (index, row) => {
    // 显示删除提示对话框
    deleteVisible.value = true
    console.log(index, row)
    empno.value = row.empno
  }
  
  // 执行具体删除操作
  function deleteEmp() {
    axios.get('http://localhost:8089/elementAdmin/deleteEmp?empno=' + empno.value).then((res) => {
      console.log(res)
      if (res.data == 1) {
        deleteVisible.value = false // 关闭删除对话框
        ElMessage({
          message: '删除成功.',
          type: 'success',
        })
        init()
      } else {
        ElMessage.error('删除失败.')
        init()
      }
    })
  }
  
  // 每页数据量发生变化的时候调用
  const handleSizeChange = (val) => {
    // val 表示每页显示数据的条数
    pageSize.value = val
    console.log(`${val} items per page`)
    init()
  }
  
  // 当前页面变化的时候调用
  const handleCurrentChange = (val) => {
    // val 表示当前页码
    currentPage.value = val
    console.log(`current page: ${val}`)
    init()
  }
  </script>